<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" href="./layui/css/layui.css">
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" href="./css/public.css">
		<link rel="stylesheet" href="./css/down.css">
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<title>飞鸟</title>
	</head>
	<body>
		<!-- 头部 -->
		<div class="head w-m clearfix">
			<!-- 已登录 -->
			<div class="logo">
				<img src="./img/flylogo.png" alt="" srcset="">
				<span>飞鸟图库</span>
			</div>
			<div class="info">
				<img src="./img/user.png" alt="">
				<span>尖尖上设计</span>
				<img src="./img/cor.png" alt="" srcset="">
				<span>余额</span>
				<img src="./img/money.png" alt="" srcset="">
				<span>￥52</span>
				<span>在线充值</span>
			</div>
			<!-- 未登录 -->
			<div class="login">
				<span>
					<a href="">登录</a> / <a href="">注册</a>
				</span>
				<span>余额</span>
				<img src="./img/money.png" alt="" srcset="">
				<span>￥0</span>
				<span>在线充值</span>
			</div>
		</div>
		<!-- banner -->
		<div class="banner">
			<div class="user clearfix">
					<div class="uInfo">
							<p>尖尖上设计</p>
							<p>会员用户</p>
						</div>
				<img src="./img/Buser.png" alt="" srcset=""> 
			</div>
		</div>
		<!-- main -->
		<div class="main w-m clearfix">
			<!-- 左侧区域 -->
			<div class="main-l">
				<ul class="side">
					<li class="item" data-type="0">
						<a href="info.html">
							<img src="img/class1.png">
							<span>个人信息</span>
						</a>
					</li>
					<li class="item active" data-type="1">
						<a href="down.html">
							<img src="img/down2.png">
							<span>下载记录</span>
						</a>
					</li>
					<li class="item" data-type="2">
						<a href="rechargeRecord.html">
							<img src="img/book1.png">
							<span>充值记录</span>
						</a>
					</li>
					<li class="item" data-type="3">
						<a href="price.html">
							<img src="img/money1.png">
							<span>价格列表</span>
						</a>
					</li>
					<li class="item" data-type="4">
						<a href="">
							<img src="img/help1.png">
							<span>服务条款</span>
						</a>
					</li>
				</ul>
			</div>
			<!-- 右侧区域 -->
			<div class="main-r">
				<div class="title">下载记录</div>
				<ul class="content clearfix">
					<li class="item">
						<p class="p1"><img src="img/pic1.png" ></p>
						<p class="p2"><img src="img/icon1.png" alt="">中国城市上海烟花浦东</p>
						<p class="p3 clearfix">
							<span>2小时前</span>
							<a href="">下载</a>
						</p>
					</li>
					<li class="item">
						<p class="p1"><img src="img/pic2.png" ></p>
						<p class="p2"><img src="img/icon2.png" alt="">中国城市上海烟花浦东</p>
						<p class="p3 clearfix">
							<span>2小时前</span>
							<a href="">下载</a>
						</p>
					</li>
					<li class="item">
						<p class="p1"><img src="img/pic3.png" ></p>
						<p class="p2"><img src="img/icon3.png" alt="">中国城市上海烟花浦东</p>
						<p class="p3 clearfix">
							<span>2小时前</span>
						</p>
					</li>
					<li class="item">
						<p class="p1"><img src="img/pic4.png" ></p>
						<p class="p2"><img src="img/icon4.png" alt="">中国城市上海烟花浦东</p>
						<p class="p3 clearfix">
							<span>2小时前</span>
						</p>
					</li>
					<li class="item">
						<p class="p1"><img src="img/pic1.png" ></p>
						<p class="p2"><img src="img/icon1.png" alt="">中国城市上海烟花浦东</p>
						<p class="p3 clearfix">
							<span>2小时前</span>
							<a href="">下载</a>
						</p>
					</li>
					<li class="item">
						<p class="p1"><img src="img/pic2.png" ></p>
						<p class="p2"><img src="img/icon2.png" alt="">中国城市上海烟花浦东</p>
						<p class="p3 clearfix">
							<span>2小时前</span>
							<a href="">下载</a>
						</p>
					</li>
					<li class="item">
						<p class="p1"><img src="img/pic3.png" ></p>
						<p class="p2"><img src="img/icon3.png" alt="">中国城市上海烟花浦东</p>
						<p class="p3 clearfix">
							<span>2小时前</span>
						</p>
					</li>
					<li class="item">
						<p class="p1"><img src="img/pic4.png" ></p>
						<p class="p2"><img src="img/icon4.png" alt="">中国城市上海烟花浦东</p>
						<p class="p3 clearfix">
							<span>2小时前</span>
						</p>
					</li>
					<li class="item">
						<p class="p1"><img src="img/pic1.png" ></p>
						<p class="p2"><img src="img/icon1.png" alt="">中国城市上海烟花浦东</p>
						<p class="p3 clearfix">
							<span>2小时前</span>
							<a href="">下载</a>
						</p>
					</li>
					<li class="item">
						<p class="p1"><img src="img/pic2.png" ></p>
						<p class="p2"><img src="img/icon2.png" alt="">中国城市上海烟花浦东</p>
						<p class="p3 clearfix">
							<span>2小时前</span>
							<a href="">下载</a>
						</p>
					</li>
					<li class="item">
						<p class="p1"><img src="img/pic3.png" ></p>
						<p class="p2"><img src="img/icon3.png" alt="">中国城市上海烟花浦东</p>
						<p class="p3 clearfix">
							<span>2小时前</span>
						</p>
					</li>
					<li class="item">
						<p class="p1"><img src="img/pic4.png" ></p>
						<p class="p2"><img src="img/icon4.png" alt="">中国城市上海烟花浦东</p>
						<p class="p3 clearfix">
							<span>2小时前</span>
						</p>
					</li>
					<li class="item">
						<p class="p1"><img src="img/pic1.png" ></p>
						<p class="p2"><img src="img/icon1.png" alt="">中国城市上海烟花浦东</p>
						<p class="p3 clearfix">
							<span>2小时前</span>
							<a href="">下载</a>
						</p>
					</li>
					<li class="item">
						<p class="p1"><img src="img/pic2.png" ></p>
						<p class="p2"><img src="img/icon2.png" alt="">中国城市上海烟花浦东</p>
						<p class="p3 clearfix">
							<span>2小时前</span>
							<a href="">下载</a>
						</p>
					</li>
					<li class="item">
						<p class="p1"><img src="img/pic3.png" ></p>
						<p class="p2"><img src="img/icon3.png" alt="">中国城市上海烟花浦东</p>
						<p class="p3 clearfix">
							<span>2小时前</span>
						</p>
					</li>
					<li class="item">
						<p class="p1"><img src="img/pic4.png" ></p>
						<p class="p2"><img src="img/icon4.png" alt="">中国城市上海烟花浦东</p>
						<p class="p3 clearfix">
							<span>2小时前</span>
						</p>
					</li>
				</ul>
				<div id="demo0" style="text-align: center;margin-bottom: 40px;"></div>
			</div>
		</div>
		<!-- 底部 -->
		<div class="foot">
			<div class="foot-bottom">
					<a href="">COPYRIGHT (©) 2018 版权所有： 飞鸟图库</a>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		layui.use(['laypage', 'element','jquery','layer'], function(){
		  var laypage = layui.laypage,
			  $ = layui.$,
			  layer = layui.layer,
			  element = layui.element;
			  
			  var arr = [
				{
					img1:'img/class1.png',
					img2:'img/class2.png',
				},
				{
					img1:'img/down1.png',
					img2:'img/down2.png',
				},
				{
					img1:'img/book1.png',
					img2:'img/book2.png',
				},
				{
					img1:'img/money1.png',
					img2:'img/money2.png',
				},
				{
					img1:'img/help1.png',
					img2:'img/help2.png',
				}
			]
			$('.side li').not(".active").hover(function() {
				$(this).addClass('active1');
				$(this).find('img')[0].src = arr[$(this).attr("data-type")].img2;
			}, function() {
				$(this).removeClass('active1');
				$(this).find('img')[0].src = arr[$(this).attr("data-type")].img1;
			})
			 // 分页 
			//总页数低于页码总数
			laypage.render({
			    elem: 'demo0'
			    ,count: 50 //数据总数
			    ,jump: function(obj){
			        // console.log(obj)
				}
			});
			
		});
	</script>
</html>
